<style lang="less" scoped>
@import "../assets/css/config.less";
*{
  margin: 0;
  padding: 0;
}
.flex-row{
  display: flex;
  justify-content: start;
  align-items: center;
}
.flex-row-up{
  display: flex;
  justify-content: start;
}
.flex-row-re{
  display: flex;
  justify-content: flex-end;
}
.flex-space-between{
  width: 1000px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-center-up{
  display: flex;
  justify-content: center;
}
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.page {
  margin: 0px auto 20px;
  width: 1000px;
}
.card {
  margin-top: 20px;
}
.font{
  font-size: 15px;
}
.card_item {
  margin-top: 20px;
  div,
  p {
    text-align: left;
  }
}

.card_question {
  width: 800px;
  margin-left: 80px;
  margin-top: 20px;
  div,
  p {
    text-align: left;
  }
}

.card_question p:first-of-type {
  font-weight: bold;
}
.delay {
  color: #a0a0a0;
  margin-left: 100px;
}

.cancel {
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.homework-content {
  width: 720px;
  word-wrap: break-word;
  text-align: left;
  font-size: 15px;
}

.student-homework-content {
  width: 800px;
  word-wrap: break-word;
  text-align: left;
  font-size: 15px;
}

.deadline_show {
  color: #a0a0a0;
  font-size: 13.8px;
}

.title {
  color: #3b3d45;
  font-size: 20px;
  font-weight: 400;
}
.card-left{
  flex: 1;
}
.card-right{
  width: 200px;
  .stu-num{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .not_handout {
    font-size: 14px;
    color: #707070;
  }

  .handout {
    font-size: 14px;
    color: #707070;
  }

  .not_handout_No {
    font-size: 30px;
  }

  .handout_No {
    font-size: 30px;
  }
}
.ques_content {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.change_color:hover {
  color: @color2;
  cursor: default;
}

.flex_display {
  display: flex;
  justify-content: space-between;
}

.cutoff {
  margin-left: 20px;
  color: #5f6368;
  background: #f1f3f4;
  padding: 3px 5px;
  border-radius: 2px;
  font-size: 15px;
}
.cutoffing {
  margin-left: 20px;
  color: @color1;
  background: #faf2ed;
  padding: 3px 5px;
  border-radius: 2px;
  font-size: 15px;
}

.display_homework {
  // position: absolute;
  margin-top: 20px;
}

.post_homework {
  display: flex;
  justify-content: start;
}

.seek {
  font-size: 16px;
  display: flex;
  justify-content: start;
  margin-top: 20px;
  align-items: center;
}

.shouqi {
  display: flex;
  align-items: center; 
  justify-content: center; 
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 999;
}
.secondary-navigation{
  min-width: 1210px;
  height: 54px;
  top: 58px;
  left: 0;
  right: 0;
  background-color: #fff;
  position: fixed;
  z-index: 100;
  padding: 5px 15px ;
  margin: 0 0 30px;
  border-bottom: 1px solid #F2F2F2;
  .item{
    cursor: default;
    margin: 0;
    .text{
      position: relative;
      font-size: 15px;
      padding: 0 15px;
      margin: 10px 0;
      border-right: 2px solid #F2F2F2;
      .active{
        color: @color2;
        &::after{
          content:'';
          // position: absolute;
          float: left;
          bottom: 0;
          border-bottom: 5px solid @color2;
          width: 100%;
          transform: translateY(10px);
        }
      }
    }
    &:hover{
      color: @color2;
    }
  }
  transition: top 0.3s;
}
.button{
  line-height: 32px;
  height: 32px;
  background-color: @color1;
  color: @white;
  border-radius: 4px;
  font-size: 13px;
  width: 80px;
  outline: none;
  border: none;
  cursor: pointer;
  &:hover{
    background-color: @color2;
  }
  &:disabled{
    background-color: #F7F7F7;
    border-color: #DCDEE2;
    color: #DCDEE2;
    cursor:  not-allowed;
  }
  &:active{
    background-color: @color3;
  }
}

.button-plain{
  line-height: 32px;
  height: 32px;
  background-color: @color6;
  border: 1px solid @color1;
  color: @color1;
  border-radius: 4px;
  font-size: 13px;
  width: 80px;
  outline: none;
  cursor: pointer;
  &:hover{
    background-color: @color1;
    color: @white;
  }
  &:active{
    background-color: @color3;
    color: @white;
  }
  &:disabled{
    background-color: #F7F7F7;
    border-color: #DCDEE2;
    color: #DCDEE2;
  }
}
.flags {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  input{
    border: 1px solid #dcdfe6;
    line-height: 32px;
    border-radius: 4px;
    outline: none;
    padding: 0 10px;
    width: 300px;
    &:focus{
      border-color: @color1;
    }
  }
}
.button2{
  line-height: 30px;
  height: 30px;
  background-color: @color6;
  border: 1px solid @color1;
  color: @color2;
  border-radius: 16px;
  font-size: 13px;
  width: 80px;
  letter-spacing: 2px;
  outline: none;
  cursor: pointer;
  &:hover{
    background-color: @color2;
    color: @white;
  }
  &:active{
    background-color: @color3;
    color: @white;
  }
  &:disabled{
    background-color: rgb(253, 249, 247);
    border-color: #ffd0b4;
    color: rgb(243, 165, 113);
    cursor: not-allowed;
  }
}
.float-left{
  float: left;
}
input{
  border: 1px solid #dcdfe6;
  line-height: 32px;
  border-radius: 4px;
  outline: none;
  padding: 0 10px;
  width: 300px;
  &:focus{
    border-color: @color2;
  }
}
.ques-add-box{
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  height: 60px;
  width: 300px;
  margin-left: 80px;
  margin-top: 20px;
}
</style>
<style lang="less">
  @import "../assets/css/config.less";
  .el-select .el-input.is-focus .el-input__inner{
    border-color: @color2;
  }
  .el-input__inner:focus{
    border-color: @color2;
  }
  .el-date-table td.today span,
  .el-button--text,
  .el-time-panel__btn.confirm{
    color: @color2;
  }
  .el-button--text:hover{
    color: @color2;
  }
  .el-date-table td.current:not(.disabled) span{
    background-color: @color2;
  }
  // .el-switch__core{
  //   border-color: @color2!important;
  //   background-color: @color2!important;
  // }
  .el-dialog__headerbtn .el-dialog__close,
  .el-message-box__headerbtn .el-message-box__close {
    color: #909399!important;
    &:hover{
      color: @color2!important;
    }
  }
  .el-button--primary{
    border-color: @color2!important;
    background-color: @color2!important;
  }
  .el-button.el-picker-panel__link-btn.el-button--default.el-button--mini.is-plain:hover{
    border-color: @color2!important;
    color: @color2!important;
  }
  .el-picker-panel__icon-btn:hover,
  .el-date-picker__header-label:hover,
  .available:hover{
    color: @color2!important;
  }
</style>
<template>
  <div id="index">
    <div class="header">
      <myheader></myheader>
    </div>
    <div style="margin-top: 60px" id="content">
      <Layout :style="{padding: '0 24px 24px','background-color': 'white','min-width': '1210px'}">
        <div class="flex-center secondary-navigation" :style="showNavigation ? 'top:58px' : 'top:-5px'">
          <div class="flex-space-between">
            <div class="flags">
              <p class="font">请输入作业号查询作业：</p>
              <input v-model="homework_seq" placeholder="请输入要查询的作业号..." />
              <button
                @click="find_seq"
                style="margin: 0 15px 0 20px;"
                class="button2"
              >查询</button>
            </div>
            <div v-if="myGroup === '0'"></div>
            <button
              v-if="myGroup !== '0'"
              @click="post"
              class="button"
              style="height:36px;width:120px;font-size:14px;letter-spacing:1px"
            >发布作业</button>
          </div>
        </div>
        <div style="padding: 65px 6px 0px">
          <my-breadcrumb :prop="breadcrumbList"></my-breadcrumb>
        </div>
        <div class="page" v-if="myGroup !== '0'">
          <!-- <el-button type="primary" plain @click="post" class="post_homework">发布作业</el-button> -->
          <div class="card" v-show="write">
            <Card class="card_item">
              <div class="flex-row" style="margin-bottom: 30px;">
                发送群体：
                <el-select
                  v-model="flags"
                  filterable
                  multiple
                  size="small"
                  placeholder="请选择"
                  style="margin-left: 20px;"
                >
                  <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                    <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-option-group>
                </el-select>
              </div>
              <div class="flex-row" style="margin-bottom: 30px;">
                作业名称：
                <input v-model="title" style="margin-left: 20px;" placeholder="作业名称"/>
              </div>
              <my-redio-group :options="redioOptions" :isrow="true" @getChoose="getChoose"/>
              <div style="text-align:left;margin-bottom: 30px;" v-show="type === 0">
                <span v-if="questionPoint.length > 0">
                  <div v-for="(question, index) in questionContent" :key="index">
                    <Card class="card_question">
                      <div class="flex_display">
                        <span v-if="question.bloom === 1">(布鲁姆认知层次：记忆)</span>
                        <span v-if="question.bloom === 2">(布鲁姆认知层次：理解)</span>
                        <span v-if="question.bloom === 3">(布鲁姆认知层次：应用)</span>
                        <span v-if="question.bloom === 4">(布鲁姆认知层次：分析)</span>
                        <span v-if="question.bloom === 5">(布鲁姆认知层次：综合)</span>
                        <span v-if="question.bloom === 6">(布鲁姆认知层次：评价和创造)</span>
                        <el-tooltip
                          style="margin-left:10px"
                          class="item"
                          effect="dark"
                          content="删除"
                          placement="right-start"
                        >
                          <Icon
                            class="el-icon-delete change_color"
                            style="right:20px;"
                            size="20"
                            @click="delete_question(question.pointId, question.questionId)"
                          ></Icon>
                        </el-tooltip>
                      </div>
                      <div v-html="question.content"></div>
                      <div v-if="question.type === 'xuanze'">
                        <div v-for="(item, index) in question.items" :key="index">
                          <span v-if="index === 0">A</span>
                          <span v-if="index === 1">B</span>
                          <span v-if="index === 2">C</span>
                          <span v-if="index === 3">D</span>
                          <span v-if="index === 4">E</span>
                          <span v-if="index === 5">F</span>
                          <span v-if="index === 6">G</span>
                          <span v-if="index === 7">H</span>
                          <span v-if="index === 8">I</span>
                          <span v-if="index === 9">J</span>
                          <span>{{item}}</span>
                        </div>
                      </div>
                      <div v-if="question.type === 'panduan'">
                        <div>正确</div>
                        <div>错误</div>
                      </div>
                    </Card>
                  </div>
                </span>
                <span class="ques-add-box change_color" @click="addin">
                  添加题目
                  <Icon
                    class="el-icon-circle-plus-outline"
                    size="28"
                  ></Icon>
                </span>
              </div>
              <div
                ref="editor"
                v-show="type === 1"
                style="text-align:left;margin-bottom: 30px;"
              ></div>
              <div style="text-align:left;margin-bottom: 50px;">
                截止日期:
                <el-date-picker
                  v-model="deadline_date"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="margin-left: 20px;"
                ></el-date-picker>
                <span v-if="deadline_date !== ''" class="delay">
                  若超时，禁止提交
                  <el-switch
                    v-model="outofdate"
                    active-color="#13ce66"
                    inactive-color="#ccc"
                    style="margin-left: 20px;"
                  ></el-switch>
                </span>
              </div>
              <div class="flex-row-re">
                <button
                  class="button-plain"
                  @click="dialogVisible = true"
                >取消</button>
                <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
                  <span>将此次编辑保留？</span>
                  <span slot="footer" class="dialog-footer">
                    <button class="button-plain" @click="cancel">不保留</button>
                    <button class="button" @click="save">保留</button>
                  </span>
                </el-dialog>
                <button class="button" @click="submit" style="margin-left:20px">发布</button>
              </div>
            </Card>
          </div>
          <div v-if="content.length===0" style="margin-top: 30px">您还未发布过作业哦~</div>
          <div v-if="content.length>0">
            <div class="card" v-for="(work, index) in content" :key="index">
              <Card class="card_item">
                <div slot="title" class="title">
                  <div style="font-size: 22px;margin-bottom:20px;margin-top:10px;">
                    序列号：
                    <span style="margin-left: 10px;">{{work.seq}}</span>
                  </div>
                  {{work.name}}
                  <span v-if="work.isCutoff" class="cutoff">已截止</span>
                  <span v-if="!work.isCutoff" class="cutoffing">正在进行</span>
                </div>
                <div class="flex-row-up">
                  <div class="card-left">
                    <div v-html="work.need" class="homework-content"></div>
                    <div class="deadline_show" style="text-align: left;margin-top:6px;">
                      截止日期:
                      <span style="margin-left: 20px;">{{work.time}}</span>
                    </div>
                    <div class="deadline_show" style="text-align: left;margin-top:6px;">
                      面向群体：
                      <span
                        style="margin-left: 10px;"
                        v-for="(item, index) in work.flags"
                        :key="index"
                      >{{item}}</span>
                    </div>
                  </div>
                  <div class="card-right flex-center-up">
                    <div class="stu-num">
                      <a
                        slot="extra"
                        class="not_handout_No"
                        @click="yet_handout(work.seq, false, work.type)"
                      >{{work.stu_num-work.submit_num}}</a>
                      <div class="not_handout">未交</div>
                    </div>
                    <div class="stu-num">
                      <a
                        slot="extra"
                        class="handout_No"
                        @click="yet_handout(work.seq, true, work.type)"
                      >{{work.submit_num}}</a>
                      <div class="handout">已交</div>
                    </div>
                      
                  </div>
                </div>
                <div>
                  <button
                    v-if="work.type==='timu'"
                    @click="watch_homework(work.question_list,work.seq)"
                    class="button display_homework"
                    style="width: 110px;"
                  >查看作业题目</button>
                </div>
                <div v-if="display_homework&&work.seq===workSeq">
                  <div v-for="(question, index) in workQuestion" :key="index">
                    <Card class="card_question">
                      <span v-if="question.bloom === 1">(布鲁姆认知层次：记忆)</span>
                      <span v-if="question.bloom === 2">(布鲁姆认知层次：理解)</span>
                      <span v-if="question.bloom === 3">(布鲁姆认知层次：应用)</span>
                      <span v-if="question.bloom === 4">(布鲁姆认知层次：分析)</span>
                      <span v-if="question.bloom === 5">(布鲁姆认知层次：综合)</span>
                      <span v-if="question.bloom === 6">(布鲁姆认知层次：评价和创造)</span>
                      <div v-html="question.question"></div>
                      <div v-if="question.type === 'xuanze'">
                        <div v-for="(item, index) in question.items" :key="index">
                          <span v-if="index === 0">A</span>
                          <span v-if="index === 1">B</span>
                          <span v-if="index === 2">C</span>
                          <span v-if="index === 3">D</span>
                          <span v-if="index === 4">E</span>
                          <span v-if="index === 5">F</span>
                          <span v-if="index === 6">G</span>
                          <span v-if="index === 7">H</span>
                          <span v-if="index === 8">I</span>
                          <span v-if="index === 9">J</span>
                          <span>{{item}}</span>
                        </div>
                      </div>
                      <div v-if="question.type === 'panduan'">
                        <div>正确</div>
                        <div>错误</div>
                      </div>
                      <div>
                        答案：
                        <div v-if="question.type === 'jianda'">言之有理即可</div>
                        <div v-if="question.type === 'panduan'">
                          <div v-if="question.answer[0] === 'yes'">正确</div>
                          <div v-if="question.answer[0] === 'no'">错误</div>
                        </div>
                        <div v-if="question.type === 'xuanze'">
                          <div v-for="(item, index) in question.answer" :key="index">
                            <p v-if="item === '1'">A</p>
                            <p v-if="item === '2'">B</p>
                            <p v-if="item === '3'">C</p>
                            <p v-if="item === '4'">D</p>
                            <p v-if="item === '5'">E</p>
                            <p v-if="item === '6'">F</p>
                            <p v-if="item === '7'">G</p>
                            <p v-if="item === '8'">H</p>
                            <p v-if="item === '9'">I</p>
                            <p v-if="item === '10'">J</p>
                          </div>
                        </div>
                      </div>
                    </Card>
                  </div>
                  <div class="shouqi">
                  <button
                    v-if="work.type==='timu'&&!display_question"
                    @click="hide_homework"
                    style="margin-top: 20px;"
                    class="button"
                  >收起作业</button>
                  </div>
                </div>
                
              </Card>
            </div>
          </div>
        </div>
        <div class="page" v-if="myGroup === '0'">
          <!-- <div class="seek" style="font-size: 16px;">
            <span class="font" style="width: 240px">请输入作业号查询作业：</span>
            <el-input v-model="homework_seq" placeholder="请输入要查询的作业号" />
            <Button @click="find_seq" style="margin: 0 0 0 20px;font-size:15px" type="primary">查询</Button>
          </div> -->
          <div v-if="content.length===0" style="margin-top: 30px">您还未收到过作业</div>
          <div v-if="content.length>0">
            <div class="card" v-for="(work, index) in content" :key="index">
              <Card class="card_item">
                <div slot="title" class="title">
                  <div style="font-size: 22px;margin-bottom:20px;margin-top:10px;">
                    序列号：
                    <span style="margin-left: 10px;">{{work.seq}}</span>
                  </div>
                  {{work.name}}
                </div>
                <div v-html="work.need" class="student-homework-content"></div>
                <div class="deadline_show" style="text-align: left;margin-top:6px;">
                  截止日期:
                  <span style="margin-left: 20px;">{{work.time}}</span>
                </div>
                <div class="flex-row-re" v-if="work.type === 'kaifang'">
                  <button
                    v-if="!work.is_submit"
                    class="button"
                    @click="handout_normalhomework(work.seq)"
                    :disabled="work.isCutoff"
                  >去提交</button>
                  <button
                    v-if="work.is_submit"
                    class="button-plain"
                    ghost
                    @click="handout_normalhomework(work.seq)"
                    :disabled="work.isCutoff"
                  >已提交</button>
                </div>
                <div class="flex-row-re" v-if="work.type === 'timu'">
                  <button
                    v-if="!work.is_submit"
                    class="button"
                    @click="handout_question_homework(work.seq)"
                    :disabled="work.isCutoff"
                  >去做题</button>
                  <button
                    v-if="work.is_submit"
                    class="button-plain"
                    ghost
                    :disabled="work.isCutoff"
                  >已完成</button>
                </div>
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    </div>
  </div>
</template>

<script>
import header from "../components/header.vue";
import myBreadcrumb from "../components/myBreadcrumb.vue";
import myRedioGroup from "../components/myRedioGroup.vue";
import { debounce } from "../utils/debounce"
import E from "wangeditor";
import { getPointContent, addHomework, getHomework } from "../api/api";
export default {
  name: "homework",
  data: function() {
    return {
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto",
        overflow: "scroll"
      },
      options: [
        // {
        //   label: "身份标签",
        //   options: [
        //     {
        //       value: "0",
        //       label: "学生"
        //     },
        //     {
        //       value: "1",
        //       label: "管理员"
        //     },
        //     {
        //       value: "2",
        //       label: "助教"
        //     },
        //     {
        //       value: "3",
        //       label: "老师"
        //     }
        //   ]
        // },
        {
          label: "学年",
          options: [
            {
              value: "4",
              label:
                new Date().getFullYear() -
                2 +
                "--" +
                (new Date().getFullYear() - 1)
            },
            {
              value: "5",
              label:
                new Date().getFullYear() - 1 + "--" + new Date().getFullYear()
            },
            {
              value: "6",
              label:
                new Date().getFullYear() + "--" + (new Date().getFullYear() + 1)
            }
          ]
        },
        {
          label: "课程",
          options: [
            {
              value: "7",
              label: "导论课"
            },
            {
              value: "8",
              label: "本科创新创业选修课"
            },
            {
              value: "9",
              label: "研究生创新创业课"
            },
            {
              value: "10",
              label: "移动互联网创意与创业课"
            },
            {
              value: "13",
              label: "内师大科技创新实践"
            }
          ]
        },
        {
          label: "组别",
          options: [
            {
              value: "11",
              label: "做题组"
            },
            {
              value: "12",
              label: "非做题组"
            }
          ]
        }
      ],
      flags: [],
      redioOptions: ['习题(布置题库题目）', '普通作业(学生需提交文字、图片等）'],
      questionPoint: [],
      questionContent: [],
      homeworklist: [],
      homework_question: [],
      draft_list: [],
      homework_type: "",
      homework_number: "",
      myGroup: "",
      editorContent: "",
      write: false,
      deadline_date: "",
      outofdate: false,
      homework_seq: "",
      check_submit: true,
      not_handout: "30",
      have_handout: "20",
      dialogVisible: false,
      type: 0,
      content: [],
      temp: [],
      workQuestion: [],
      workSeq: "",
      isCutoff: false,
      display_homework: false,
      display_question: true,
      title: "",
      lastScrollTop: 0,
      showNavigation: true,
      breadcrumbList: [
        {
          name: "首页",
          blod: true,
          to: "index",
        }, {
          name: "作业",
        }
      ],
    };
  },
  created() {
    if (JSON.parse(sessionStorage.getItem("homeworklist")) != null) {
      this.questionPoint = JSON.parse(sessionStorage.getItem("homeworklist"));
    }
    if (JSON.parse(sessionStorage.getItem("homeworkdraft")) != null) {
      this.flags = JSON.parse(sessionStorage.getItem("homeworkdraft")).flags;
      this.title = JSON.parse(sessionStorage.getItem("homeworkdraft")).title;
      this.type = JSON.parse(sessionStorage.getItem("homeworkdraft")).type;
      this.editorContent = JSON.parse(
        sessionStorage.getItem("homeworkdraft")
      ).editorContent;
      this.questionContent = JSON.parse(
        sessionStorage.getItem("homeworkdraft")
      ).questionContent;
      this.deadline_date = JSON.parse(
        sessionStorage.getItem("homeworkdraft")
      ).deadline_date;
      this.outofdate = JSON.parse(
        sessionStorage.getItem("homeworkdraft")
      ).outofdate;
    }
  },
  mounted() {
    const that = this
    window.addEventListener('scroll', debounce(function(e){
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
      
      if(scrollTop>that.lastScrollTop){
        that.showNavigation = false
      } else {
        that.showNavigation = true
      }
      that.lastScrollTop = scrollTop
    }, 50, false))

    let content_top = document.getElementById("content").offsetTop;
    this.bg.height = `${window.innerHeight - content_top}px`;
    this.myGroup = JSON.parse(this.$store.state.user).userGroup;
    if (this.questionPoint.length > 0) {
      for (var i = 0; i < this.questionPoint.length; i++) {
        getPointContent({
          point_id: this.questionPoint[i].pointId,
          question_id: this.questionPoint[i].questionId,
          userGroup: JSON.parse(this.$store.state.user).userGroup
        })
          .then(response => {
            if (response.state === true) {
              this.questionContent.push(response.question);
            } else {
              this.$Message.error(response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
      }
    }
    if (this.myGroup !== "0") {
      getHomework({
        UUID: this.$store.state.UUID
      })
        .then(response => {
          if (response.state === true) {
            this.content = response.homeworks;
            this.content.reverse();
            var that = this;
            for (var m = 0; m < that.content.length; m++) {
              that.isCutoff = false;
              if (that.content[m].is_late) {
                var str = that.content[m].time.toString();
                str = str.replace("/-/g", "/");
                var oldTime = new Date(str).getTime();
                if (oldTime < new Date().getTime()) {
                  that.isCutoff = true;
                  that.content[m].isCutoff = that.isCutoff;
                } else {
                  that.content[m].isCutoff = that.isCutoff;
                }
              }
            }
          } else {
            this.$Message.error(response.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
    } else {
      let flags = JSON.parse(this.$store.state.user).flags
      flags.push('学生')
      getHomework({
        flags: flags,
        stu_UUID: this.$store.state.UUID
      })
        .then(response => {
          if (response.state === true) {
            this.content = response.homeworks;
            this.content.reverse();
            var that = this;
            for (var m = 0; m < that.content.length; m++) {
              that.isCutoff = false;
              if (that.content[m].is_late) {
                var str = that.content[m].time.toString();
                str = str.replace("/-/g", "/");
                var oldTime = new Date(str).getTime();
                if (oldTime < new Date().getTime()) {
                  that.isCutoff = true;
                  that.content[m].isCutoff = that.isCutoff;
                } else {
                  that.content[m].isCutoff = that.isCutoff;
                }
              } else {
                that.content[m].isCutoff = that.isCutoff;
              }
            }
          } else {
            this.$Message.error(response.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
    }
  },
  components: {
    myheader: header,
    'my-redio-group': myRedioGroup,
    'my-breadcrumb': myBreadcrumb
  },
  methods: {
    getChoose(index){
      this.type = index
    },
    post() {
      this.write = true;
      var editor = new E(this.$refs.editor);
      editor.customConfig.onchange = html => {
        this.editorContent = html;
      };
      var url = "";
      if (process.env.NODE_ENV === "development") {
        url = "http://localhost:8080/api/uploadImg";
      } else if (process.env.NODE_ENV === "production") {
        url = "https://www.ourspark.org/api/uploadImg";
      }
      editor.customConfig.uploadImgServer = url;
      editor.customConfig.zIndex = 0;
      editor.create();
      editor.txt.html("作业简介,作业格式等要求");
    },
    cancel() {
      this.dialogVisible = false;
      this.write = false;
      if (JSON.parse(sessionStorage.getItem("homeworkdraft")) != null) {
        sessionStorage.removeItem("homeworkdraft");
      } else {
        this.flags = [];
        this.title = "";
        this.type = 1;
        this.editorContent = "";
        this.questionContent = [];
        this.questionPoint = [];
        sessionStorage.removeItem("homeworklist");
        this.deadline_date = "";
        this.outofdate = false;
      }
    },
    save() {
      this.write = false;
      this.dialogVisible = false;
      sessionStorage.setItem(
        "homeworkdraft",
        JSON.stringify({
          flags: this.flags,
          title: this.title,
          type: this.type,
          editorContent: this.editorContent,
          questionContent: this.questionContent,
          deadline_date: this.deadline_date,
          outofdate: this.outofdate
        })
      );
    },
    addNewHomeworkSuccess(homework_number){
      // 添加作业成功后执行
      this.$alert(
        "发布成功！您发布的作业序列号为：" + homework_number,
        "提示",
        {
          confirmButtonText: "确定",
          callback: action => {
            this.write = false;
            if (this.myGroup !== "0") {
              getHomework({
                UUID: this.$store.state.UUID
              })
                .then(response => {
                  if (response.state === true) {
                    this.content = response.homeworks;
                    this.content.reverse();
                    var that = this;
                    for (var m = 0; m < that.content.length; m++) {
                      that.isCutoff = false;
                      if (that.content[m].is_late) {
                        var str = that.content[m].time.toString();
                        str = str.replace("/-/g", "/");
                        var oldTime = new Date(str).getTime();
                        if (oldTime < new Date().getTime()) {
                          that.isCutoff = true;
                          that.content[m].isCutoff = that.isCutoff;
                        } else {
                          that.content[m].isCutoff = that.isCutoff;
                        }
                      }
                    }
                  } else {
                    this.$Message.error(response.msg);
                  }
                })
                .catch(error => {
                  this.$Message.error(error.status);
                });
            } else {
              let flags = JSON.parse(this.$store.state.user).flags
              flags.push('学生')
              getHomework({
                flags: flags
              })
                .then(response => {
                  if (response.state === true) {
                    this.content = response.homeworks;
                    this.content.reverse();
                    var that = this;
                    for (var m = 0; m < that.content.length; m++) {
                      that.isCutoff = false;
                      if (that.content[m].is_late) {
                        var str = that.content[m].time.toString();
                        str = str.replace("/-/g", "/");
                        var oldTime = new Date(str).getTime();
                        if (oldTime < new Date().getTime()) {
                          that.isCutoff = true;
                          that.content[m].isCutoff = that.isCutoff;
                        } else {
                          that.content[m].isCutoff = that.isCutoff;
                        }
                      } else {
                        that.content[m].isCutoff = that.isCutoff;
                      }
                    }
                  } else {
                    this.$Message.error(response.msg);
                  }
                })
                .catch(error => {
                  this.$Message.error(error.status);
                });
            }
          }
        }
      );
    },
    submit() {
      if (this.flags.length === 0 || this.title === "" || this.deadline_date === "" || this.deadline_date === null) {
        this.$Message.error("作业信息不完整");
        return
      }
      if (this.type === 0 && this.questionContent.length > 0) {
        this.editorContent = "完成习题";
        this.homework_type = "timu";
        for (var j = 0; j < this.questionContent.length; j++) {
          this.homework_question.push({
            questionId: this.questionContent[j].questionId,
            pointId: this.questionContent[j].pointId
          });
        }
        let json;
        json = {
          flags: this.flags,
          UUID: JSON.parse(this.$store.state.user).UUID,
          name: this.title,
          need: this.editorContent,
          question: this.homework_question,
          time: this.deadline_date,
          is_late: this.outofdate,
          type: this.homework_type
        };
        addHomework(json)
          .then(response => {
            if (response.state === true) {
              this.homework_number = response.homework_num;
              this.addNewHomeworkSuccess(this.homework_number)
              sessionStorage.removeItem("homeworklist");
              if (
                JSON.parse(sessionStorage.getItem("homeworkdraft")) != null
              ) {
                sessionStorage.removeItem("homeworkdraft");
              } else {
                this.flags = [];
                this.title = "";
                this.type = 1;
                this.editorContent = "";
                this.questionContent = [];
                this.questionPoint = [];
                sessionStorage.removeItem("homeworklist");
                this.deadline_date = "";
                this.outofdate = false;
              }
            } else {
              this.$Message.error(response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
      } else if (this.type === "1" && this.editorContent !== "") {
        this.homework_type = "kaifang";
        let json;
        json = {
          flags: this.flags,
          UUID: JSON.parse(this.$store.state.user).UUID,
          name: this.title,
          need: this.editorContent,
          question: [],
          time: this.deadline_date,
          is_late: this.outofdate,
          type: this.homework_type
        };
        addHomework(json)
          .then(response => {
            if (response.state === true) {
              this.homework_number = response.homework_num;
              this.addNewHomeworkSuccess(this.homework_number)
            } else {
              this.$Message.error(response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
      } else {
        this.$Message.error("作业信息不完整");
      }
    },
    handout_normalhomework(homework_num) {
      sessionStorage.setItem(
        "homework_seq",
        JSON.stringify({
          seq: homework_num
        })
      );
      this.$router.push({
        name: "normalHomework"
      });
    },
    handout_question_homework(homeworkNumber) {
      sessionStorage.setItem(
        "homework_seq",
        JSON.stringify({
          seq: homeworkNumber
        })
      );
      this.$router.push({
        name: "doHomework"
      });
    },
    addin() {
      this.$alert("去知识点-题库中添加需要的作业题吧~", "提示", {
        confirmButtonText: "确定",
        callback: action => {}
      });
    },
    delete_question(pId, qId) {
      for (var i = 0; i < this.questionContent.length; i++) {
        if (
          this.questionContent[i].pointId === pId &&
          this.questionContent[i].questionId === qId
        ) {
          this.questionContent.splice(i, 1);
        }
      }
      for (var j = 0; j < this.questionContent.length; j++) {
        this.homeworklist.push({
          questionId: this.questionContent[j].questionId,
          pointId: this.questionContent[j].pointId
        });
      }
      sessionStorage.setItem("homeworklist", JSON.stringify(this.homeworklist));
    },
    yet_handout(seq, flag, type) {
      sessionStorage.setItem(
        "homeworkSeq",
        JSON.stringify({
          seq: seq
        })
      );
      if (!flag) {
        this.$router.push({
          name: "homeworkNotHand"
        });
        return;
      }
      if (type === "timu") {
        this.$router.push({
          name: "totalHomework"
        });
        return;
      }
      this.$router.push({
        name: "normalHomeworkResult"
      });
    },
    find_seq() {
      if (this.myGroup !== "0") {
        getHomework({
          UUID: this.$store.state.UUID
        })
          .then(response => {
            if (response.state === true) {
              this.content = response.homeworks;
              var findit = false;
              var that = this;
              for (var z = 0; z < that.content.length; z++) {
                if (that.content[z].seq == that.homework_seq) {
                  that.temp = that.content[z];
                  that.content = [];
                  that.content.push(that.temp);
                  findit = true;
                  break;
                }
              }
              if (!findit) {
                this.$Message.error("作业序列号不存在");
              }
            } else {
              this.$Message.error(response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
      } else {
        let flags = JSON.parse(this.$store.state.user).flags
        flags.push('学生')
        getHomework({
          flags: flags
        })
          .then(response => {
            if (response.state === true) {
              this.content = response.homeworks;
              var findit = false;
              var that = this;
              for (var z = 0; z < that.content.length; z++) {
                if (that.content[z].seq == that.homework_seq) {
                  that.temp = that.content[z];
                  that.content = [];
                  that.content.push(that.temp);
                  findit = true;
                  break;
                }
              }
              if (!findit) {
                this.$Message.error("作业序列号不存在");
              }
            } else {
              this.$Message.error(response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
      }
    },
    watch_homework(work_questionlist, work_seq) {
      this.display_homework = true;
      this.workQuestion = work_questionlist;
      this.workSeq = work_seq;
      this.display_question = false;
    },
    hide_homework() {
      this.display_homework = false;
      this.display_question = true;
    }
  }
};
</script>
